<template>
    <a-layout class="design-container">
        <loading2 
            v-if="loading"
            style="background-color:  rgba(240, 240, 240, 0.5);position: absolute;top: 0;left: 0;z-index:99999"
        />
        <design-header @setLoading="setLoading"/>
        <design-content/>
    </a-layout>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onBeforeMount, onMounted,ref } from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import loading2 from '@/components/loading/loading2.vue'
import { useDataViewHistoryStore } from '@/stores/dataviewHistory';


const designHeader = defineAsyncComponent(()=>import('./components/designHeader/designHeader.vue'))
const designContent = defineAsyncComponent(()=>import('./components/designContent/designContent.vue'))

const dataviewHistoryStore = useDataViewHistoryStore()
const dataviewStore = useDataViewStore()

const loading = ref(false)

// 初始化画布
dataviewHistoryStore.canvasInit(dataviewStore.getEditCanvas)

const setLoading = (val:boolean)=>{
    loading.value = val
}

onBeforeMount(()=>{
    dataviewStore.init()
})
</script>

<style lang="scss" scoped>
.design-container{
    height: 100vh;
    overflow: hidden;
    user-select: none;
}
</style>